<template>
  <div>
    <!-- <h1>我是aside</h1> -->
    <!-- <div>{{ asideList }}</div> -->
    <el-menu
      :default-active="$router.name"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="collapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <h2>{{ collapse ? "" : "采购管理系统" }}</h2>

      <div v-for="item in asideList" :key="item.name">
        <el-menu-item
          v-if="!item.children"
          :index="item.name"
          @click="$router.push({ name: item.name })"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{ collapse ? "" : item.meta.title }}</span>
        </el-menu-item>

        <el-submenu index="2" v-else>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ collapse ? "" : item.meta.title }}</span>
          </template>

          <el-menu-item
            v-for="subitem in item.children"
            :key="subitem.name"
            :index="subitem.name"
            @click="$router.push({ name: subitem.name })"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ subitem.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { MainChildren } from "@/router/index";

export default {
  data() {
    return {
      asideList: MainChildren,
    };
  },
  mounted() {
    // console.log('我是collapse', this.collapse);

    console.log("this.asideList", this.asideList);
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log("handleOpen", key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log("handleClose", key, keyPath);
    },
  },
  computed: {
    ...mapState(["collapse"]),
  },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: 100vh;
}

.el-menu {
  border-right: none;

  h2 {
    color: white;
    text-align: center;
    margin: 20px 0;
  }

  .el-submenu {
    .el-menu-item {
      padding-left: 40px !important;
    }
  }
}
</style>
